<template>
  <div>
    <div class="recommend_title">正在直播</div>
    <ul>
      <li class="item border-bottom" v-for="item of recommendList" :key="item.id">
        <div class="item-mg-wrapper">
          <img class="item-img" :src="item.imgUrl"/>
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">&nbsp;&nbsp;{{item.desc}}</p>
          <div class="item-tag">
            <p class="item-type">{{item.type}}</p>
            <button class="item-button">进入会议</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Recommend',
  data () {
    return {
      recommendList: [{
        id: '001',
        imgUrl: 'http://wsing.bssdl.kugou.com/568b1fdacafa76d03b55dd68b97b645e.jpg_180x180.jpg',
        desc: '汐音社',
        title: '杀意荡-萧忆情Alex',
        type: '音乐会'
      }, {
        id: '002',
        imgUrl: 'http://wsing.bssdl.kugou.com/66854466844ab95b082dd9333df610cd.jpg_180x180.jpg',
        desc: '临睡前，女子倚靠在床侧，就着桌上那盏灯发出的朦朦胧胧的光芒将近来收集到的话本一页页翻阅。\n' +
        '            大抵是个年轻书生写的自述，看到第一行字写到秦淮，她便忍不住发笑。她本就身在秦淮，却又通过这些搜罗到故事中看到这个地方，想来其实有些荒唐，却也只是一些无关紧要的细枝末节。',
        title: '秦淮夜',
        type: '音乐会'
      }, {
        id: '003',
        imgUrl: 'http://wsing.bssdl.kugou.com/b406d6607c114d2a76c956481b6623a0.jpg_188x188.jpg',
        desc: '遥遥千里星，迢迢河汉中，七夕今宵看碧霄，牵牛织女渡河桥。当金风和玉露相逢，愿佳期...',
        title: '玉露·裁清辉',
        type: '聊天室'
      }, {
        id: '004',
        imgUrl: 'http://wsing.bssdl.kugou.com/1cdb7b86d56265a3b3886fa31baec903.jpg_188x188.jpg',
        desc: '表白所有主创！！\n' +
        '很开心能合作这首歌，听demo的时候就觉得很好听',
        title: '商颂 -《今时古梦》系列·商朝',
        type: '情感电台'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/style/minxis.styl'
  .recommend_title
    line-height: .8 rem
    background: #eee
    text-indent: .2 rem
  .item
    display: flex
    height: 2.0rem
    .item-img
      width: 1.7 rem
      heght: 1.7 rem
      padding .1 rem
    .item-info
      flex: 1
      padding .1 rem
      .item-title
        line-height: .54 rem
        font-size: .32 rem
        ellipse()
      .item-desc
        line-height: .4 rem
        font-size: .25 rem
        color: #ccc
        ellipse()
      .item-tag
        background: red
        .item-button
          margin-top: .1rem
          background: #ff9300
          padding: 0 .1rem
          border-radius: .06rem
          color: #fff
          float: left
        .item-type
          float: right
          margin-top: .25rem
          padding: 0 .1rem
          font-size: .28 rem
</style>
